/*****************************************************************************
   MACROS
*****************************************************************************/
.linearGradient(@color1:#ccc, @color2:#ddd) {
  background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, @color1), color-stop(100%, @color2));
  background-image:-moz-linear-gradient(center bottom, @color1 0, @color2 100%);
  background-image:-o-linear-gradient(center bottom, @color1 0, @color2 100%);
  background-image:linear-gradient(center bottom, @color1 0, @color2 100%);
  background-color: @color1;
}

.fixed(@top:0, @left:0, @height:100%, @width:100%) {
  position: fixed;
  top: @top; left: @left; height: @height; width: @width;
}

/*****************************************************************************
   CONSTANTS
*****************************************************************************/

@mainIndent: 2%;
@storyIndent: 1em;

@contentTop: 0.3em;
@contentPanelHeight: 4em;
@contentWidth: 90%;
@contentDiminishedWidth: 40%;

@commentsWidth: 60%;

@tableBG: #F6F6EF;

/*****************************************************************************
   GENERAL
*****************************************************************************/

* { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 1em; }
a,a:visited { color: black; text-decoration: none; }
td { padding: 0 0.2em; }

.loginStatus { display: block; }
.error   { color: red; display: none; }
.success { color: green; display: none; }
.pending { display: none; }
.notAttempted { display: block; }
.pseudolink, .toggle span { color: black; text-decoration: underline; cursor: pointer; }
.toggle + * { display: none; }

/*****************************************************************************
   GENERAL CONTROLS
*****************************************************************************/

.reload { background: #f9b; width: 3em; padding: 0.2em 0.6em; border-radius: 0.5em;
          text-decoration: none; cursor: pointer; }

/*****************************************************************************
   PAGE STRUCTURE
*****************************************************************************/

html, body { height: 100%; }
#container { position: relative; min-height: 100%; }
body { font-size:100%; }
#header { line-height: 1.3em; }
#header { background: #fe761b; margin: 0 0 1em; padding: 1em @mainIndent 0.5em; }
#header .wrapper { margin-left: @storyIndent; }
h1 { font-family: Neuton, ariel, helvetica, sans-serif; font-size: 2em; }
#about { font-size: 0.75em; }
#main { text-align: center; }
#main > * {
  text-align: left; width: 100%-2*@mainIndent; margin: 0 auto 1em;
  margin-bottom: 2em;
}
#footer {
  width: 100%-2*@mainIndent; margin: 1em auto; text-align: right; font-size: small;
  position: absolute; bottom: 1em;
  a { text-decoration: underline; }
}

/*****************************************************************************
   SETTINGS
*****************************************************************************/

#settings { padding-left: @storyIndent; }
#settings input { width: 10em; }
#settings button { padding: 0 1em; }
#settings .nav { margin-right: 2em; float: right; display: none; } /* disabled as API not responding */

/*****************************************************************************
   STORIES
*****************************************************************************/

/* Chrome border bug right now */
tr, td { border-width: 0 !important; }
tr:nth-child(2n) { background: 0.9 * @tableBG; }

#stories .timedout {
  display: none; padding-top: 1em;
  p { margin-top: 0.5em; }
  a { text-decoration: underline; }
}

#stories {
  background: @tableBG;
  border-collapse: collapse;
  margin-bottom: 3em;
}

.story { 
  border: 1px solid black;
  border-bottom-width: 0; &:last-child { border-bottom-width: 1px; }
  cursor: pointer;
  &:hover { .linearGradient(#fff4cc, #fff066); }
  &.selected { background-color: red; }
  -webkit-transition: all 0.2s ease-in-out;
  .title { font-size: 1.5em; }

  .url { 
    padding: 0.2em @storyIndent;
  }

  .commentsLink,.commentsLink:visited {
    width: 1px;
    text-align: right;
    white-space: pre;
    color: #666;

    &:hover span { border-bottom: 1px dotted black; cursor: pointer; }

  }

  .postedAgo { white-space: pre; }

  /* .url a:hover, .postedBy:hover, .commentsLink:hover span { text-decoration: underline; } */

}

.readLaterStatus { 

  width: 5em;
  overflow: hidden;

  opacity: 0.3; &:hover { opacity: 1; }

  span {
    background: #ccc;
    text-align: center;
    float: left;
    width: 70%;
    font-size: 0.7m; color: #666;
    border: 1px solid #999; border-radius: 0.5em;
    padding: 0 0.5em;
    &:hover { background: #999; color: white; }
    white-space: pre;
  }

  .success { background: #bbb; }

}
.instapaperActive .readLaterStatus {
  opacity: 1;
}

/*****************************************************************************
  CONTENT AND COMMENTS
*****************************************************************************/

#content, #contentPanel {
  .fixed(0, 100%, 100%, @contentWidth);
  -webkit-transition: left 0.3s ease-in-out;
}

#content { background: white; }
#content { .fixed(@contentTop+@contentPanelHeight, 100%, 100%, @contentWidth); }

#contentPanel { .linearGradient(#ddd, #fff); }
#contentPanel { .fixed(@contentTop, 100%, @contentPanelHeight, @contentWidth); }

#content[src^=http], #content[src^=http] + #contentPanel {
  left: 100-@contentWidth;
  -webkit-box-shadow: 0px 0px 20px #000;
}

#content.diminished, #content.diminished + #contentPanel {
  .fixed(@contentTop, 100-@contentDiminishedWidth,
         @contentPanelHeight, @contentWidth);
  -webkit-transition: left 0.3s ease-in-out;
  background: white;
}

#comments {
  .fixed(65px, 100%, 100%, @commentsWidth);
  -webkit-transition: left 0.3s ease-in-out;
  background-color: white;
}

#comments[src^=http] {
  left: 100-@commentsWidth;
  -webkit-box-shadow: 0px 0px 20px #000;
}

/*****************************************************************************
  CONTENT PANEL
*****************************************************************************/

.storyMain  {

  padding: 0.4em;
  .title { font-size: 1.5em; }
  #twitter { padding: 0.5em; }

}

.postAuxiliary { font-size: 0.7em; display: block; }

.navControls { float: right; margin: 0.5em 1em }
#simplifiedWrapper { margin-bottom: 0.2em; }
#contentPanel .commentsLink { display: block; }
#contentPanel .commentsOn { display: none; }
#twitter { background: #ddd; }

.close {
  float: right;
  margin: 0.3em 0.3em;
  background: #ccc;
  font-size: 1.8em;
  border: 1px solid #aaa;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 5px #000;
}
